<template>
  <div class="p-10">
    <a-button :loading="loading" @click="search"> 点我查询 </a-button>
    <a-table
      size="small"
      :scroll="{ x: 1300 }"
      :dataSource="dataSource"
      :loading="loading"
      :columns="[
        {
          ellipsis: true,
          title: '姓名',
          dataIndex: 'name',
          key: 'name',
          width: 60,
        },
        {
          ellipsis: true,
          title: '描述',
          dataIndex: 'desc',
          key: 'desc',
          width: 60,
        },
      ]"
      :canResize="false"
      bordered
      :pagination="{
        current: current,
        pageSize: size,
        total: total,
        showSizeChanger: true,
        size: 'small',
        showQuickJumper: true,
        showTotal: (total) => `共有${total}条数据`,
      }"
      @change="changeForTable"
    >
    </a-table>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { useAsiaTable, AiFetchResult } from "../../hooks/useTable";

const formState = ref({
  name: "tusuzer",
  desc: "desc",
});

const api = (param: any) => {
  const myHeaders = new Headers();
  myHeaders.append("User-Agent", "Apifox/1.0.0 (https://apifox.com)");

  var requestOptions = {
    method: "POST",
    headers: myHeaders,
    body: JSON.stringify(param),
  };

  return fetch(
    "http://127.0.0.1:4523/m2/3532120-0-default/122058008",
    requestOptions,
  )
    .then((response) => {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(response.json());
        }, 1000);
      });
    })
    .catch((error) => console.log("error", error)) as Promise<
    AiFetchResult<
      {
        name: string;
        desc: string;
      }[]
    >
  >;
};
const { current, size, total, dataSource, loading, changeForTable, page } =
  useAsiaTable(api, formState, {
    current: 1,
    size: 10,
    lazyLoad: false,
    resultKey: "result",
  });

const showModal = () => {
  page(1, 10);
};

dataSource.value.forEach((item) => {});
setTimeout(() => {
  showModal();
}, 2000);
dataSource.value.forEach((item) => {});
</script>
<style scoped>
</style>
